@import "../../commonFunc";

.image_component_module{
    ul {
        li {
            width: calc((100% / 6) - 16px);
            height: px2rem(124);
            margin: px2rem(8);
            @include position(relative);
            border: 1px solid rgba(175, 137, 98, .6);
            @include bgColor(rgba(255, 255, 255, .4));
            transition: .3s linear;
            overflow: hidden;
            @include displayFlex;

            &:hover {
                transform: scale(1.06);

                .shadow_img {
                    bottom: 0;
                }
            }

            img {
                max-width: 100%;
            }

            .shadow_img {
                @include position;
                @include trbl('', 0, -100%, 0);
                height: 100%;
                @include bgColor(rgba(112, 22, 24, .4));
                @include displayFlex;
                @include color(white);
                cursor: pointer;
                transition: .3s linear;


                div {
                    text-align: center;
                }

                .anticon {
                    @include fontSize(px2rem(26));
                }

                p {
                    @include fontSize(px2rem(15))
                }

                &:hover {
                    @include color(#e5e5e5)
                }
            }
        }
    }
}